<template>
    <div class="couponEditor">
        <div class="couponEditor-wrap">
            <!-- title -->
            <div
                class="header"
                v-if="TYPE !== 'detail'"
            >
                {{ TYPE == 'edit' ? '编辑红包' : '新增红包' }}
            </div>

            <!-- content -->
            <div class="wrap">
                <p class="title">
                    基本信息
                </p>
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="el-form-wrap"
                >
                    <el-form-item
                        label="红包名称"
                        prop="coupon_name"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <el-input
                            v-model="ruleForm.coupon_name"
                            maxlength="12"
                            show-word-limit
                            size="medium"
                            :style="{width: '400px'}"
                        />
                        <p class="coupon-name">
                            建议描述具体优惠，如：无门槛5元红包
                        </p>
                    </el-form-item>
                    <el-form-item
                        label="发放总量"
                        prop="coupon_number"
                        :style="{pointerEvents: ifCountEdit ? 'none' : ''}"
                    >
                        <el-input
                            oninput="value = value.replace(/[^\d]/g,'')"
                            type="text"
                            v-model="ruleForm.coupon_number"
                            size="medium"
                            :style="{width: '218px'}"
                        >
                            <p
                                slot="suffix"
                                :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '8px'}"
                            >
                                张
                            </p>
                        </el-input>
                        <p class="coupon-name">
                            单次最多100000个
                        </p>
                    </el-form-item>
                    <el-form-item
                        label="每人限领"
                        prop="coupon_limit"
                        :style="{pointerEvents: ifCountEdit ? 'none' : ''}"
                    >
                        <el-input
                            oninput="value = value.replace(/[^\d]/g,'')"
                            type="text"
                            v-model="ruleForm.coupon_limit"
                            size="medium"
                            :style="{width: '218px'}"
                        >
                            <p
                                slot="suffix"
                                :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '8px'}"
                            >
                                张
                            </p>
                        </el-input>
                        <p class="coupon-name">
                            填写0为不限制
                        </p>
                    </el-form-item>
                    <el-form-item
                        label="渠道类型"
                        prop="channel_category"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <el-select
                            v-model="ruleForm.channel_category"
                            size="medium"
                            :style="{width: '218px'}"
                        >
                            <el-option
                                v-for="item in channelList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                        <p class="coupon-name">
                            该选项仅用于运营人员区分红包发放渠道标记
                        </p>
                    </el-form-item>
                    <el-form-item
                        label="领券时间"
                        prop="coupon_collect"
                        :style="{pointerEvents: ifCountEdit ? 'none' : ''}"
                    >
                        <el-date-picker
                            v-model="ruleForm.coupon_collect"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            align="right"
                            size="medium"
                        />
                    </el-form-item>
                    <el-form-item
                        label="使用时间"
                        prop="coupon_date"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <div class="coupon_date">
                            <el-radio-group v-model="ruleForm.coupon_date">
                                <el-radio
                                    :label="'fixed'"
                                >固定时间</el-radio>
                                <el-radio
                                    :label="'note'"
                                >领取后生效</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <div
                            class="coupon_date"
                            v-if="ruleForm.coupon_date == 'fixed'"
                        >
                            <el-date-picker
                                v-model="ruleForm.coupon_date_time"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                align="right"
                                size="medium"
                            />
                        </div>
                        <div
                            class="coupon_date"
                            v-if="ruleForm.coupon_date == 'note'"
                        >
                            <el-input
                                oninput="value = value.replace(/[^\d]/g,'')"
                                v-model="ruleForm.coupon_date_number"
                                size="medium"
                                placeholder="请输入领取后生效天数"
                                :style="{width: '400px'}"
                            >
                                <p
                                    slot="suffix"
                                    :style="{color: 'rgba(102, 102, 102, 1)',marginRight: '5px'}"
                                >
                                    天
                                </p>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="是否平台补贴"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <el-radio-group
                            class="coupon_date"
                            v-model="ruleForm.shop_subsidy_enable "
                            @change="handleRadioChange"
                        >
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="2">商家部分补贴</el-radio>
                        </el-radio-group>
                        <span class="coupon-name">选择否，平台红包的优惠金额由商家补贴，请谨慎选择</span>
                    </el-form-item>
                    <el-form-item
                        v-if="ruleForm.shop_subsidy_enable === 2"
                        prop="shop_subsidy_money_by_shop"
                    >
                        <span style="margin-right: 12px; color: #606266">请输入商家补贴金额</span>
                        <el-input
                            v-model="ruleForm.shop_subsidy_money_by_shop"
                            size="medium"
                            style="width: 120px"
                        >
                            <span
                                slot="suffix"
                                :style="{marginRight: '5px'}"
                            >
                                元
                            </span>
                        </el-input>
                    </el-form-item>
                    <p
                        class="title"
                        :style="{marginTop: '52px'}"
                    >
                        优惠规则
                    </p>
                    <el-form-item
                        label="优惠类型"
                        prop="coupon_type"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <div class="coupon_date">
                            <el-radio-group v-model="ruleForm.coupon_type">
                                <el-radio
                                    :label="1"
                                >抵扣</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="使用门槛"
                        prop="coupon_thres"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <el-radio-group
                            v-model="ruleForm.coupon_thres"
                            class="el-radio-group-label"
                            :style="{top: '14px'}"
                        >
                            <el-radio
                                :label="1"
                            >无使用门槛</el-radio>
                            <el-radio
                                :label="2"
                                class="el-radio-wrap"
                                :style="{marginTop: '32px'}"
                            >
                                订单满
                                <el-input
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                    type="text"
                                    v-model="ruleForm.coupon_thres_money"
                                    size="medium"
                                    :style="{width: '142px', marginLeft: '12px'}"
                                >
                                    <p
                                        slot="suffix"
                                        :style="{color: 'rgba(102, 102, 102, 1)', marginTop: '12px', marginRight: '5px'}"
                                    >
                                        元
                                    </p>
                                </el-input>
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div
                        class="el-line"
                        style="height: 24px"
                    />
                    <el-form-item
                        label="优惠内容"
                        prop="coupon_content"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <p :style="{color: 'rgba(51, 51, 51, 1)', fontSize: '14px', marginRight: '12px'}">
                            减免
                        </p>
                        <el-input
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                            type="text"
                            v-model="ruleForm.coupon_content"
                            size="medium"
                            :style="{width: '178px'}"
                        >
                            <p
                                slot="suffix"
                                :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '8px'}"
                            >
                                元
                            </p>
                        </el-input>
                        <p
                            class="coupon-name"
                            :style="{width: '451px', fontSize: '12px', lineHeight: '18px'}"
                        >
                            优惠内容是平台单独给消费者的优惠金额，设置大额优惠金额时需谨慎，以免造成资损（测试活动建议设置小额优惠内容）
                        </p>
                    </el-form-item>
                    <el-form-item
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                        v-if="ruleForm.coupon_type === 2"
                    >
                        <el-checkbox
                            style="margin-right: 12px"
                        >
                            最多优惠
                        </el-checkbox>
                        <el-input
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                            type="text"
                            v-model.number="ruleForm.coupon_content"
                            size="medium"
                            :style="{width: '178px'}"
                        >
                            <p
                                slot="suffix"
                                :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '8px'}"
                            >
                                元
                            </p>
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        label="适用商品"
                        prop="coupon_shop"
                    >
                        <div class="coupon_cloumn">
                            <el-radio
                                v-model="ruleForm.coupon_shop"
                                :label="1"
                                class="el-radio-wrap"
                                :style="{marginTop: '3px', pointerEvents: ifEdit ? 'none' : ''}"

                            >
                                全部团购商品和折扣商品，秒杀商品可用
                                <p
                                    class="coupon-name"
                                    :style="{width: '446px', fontSize: '12px', lineHeight: '18px', whiteSpace: 'normal'}"
                                >
                                    红包活动适用商品范围不包含不包含以下商品类型：0元购商品，上述商品不参加红包活动
                                </p>
                            </el-radio>
                            <el-radio
                                v-model="ruleForm.coupon_shop"
                                :label="2"
                                :style="{pointerEvents: ifEdit ? 'none' : ''}"
                            >
                                指定商品可用
                            </el-radio>
                            <div
                                class="coupon_change"
                                @click="changeAvailable()"
                                :style="{color: ruleForm.coupon_shop !== 2 ? '#999999' : '#409EFF', border: ruleForm.coupon_shop !== 2 ? '1px #999999 solid': '1px #1890ff solid', pointerEvents: ruleForm.coupon_shop !== 2 || ifCountEdit ? 'none' : ''}"
                            >
                                {{ changeDataList.length && ruleForm.coupon_shop == 2 ? '修改已选商品' : '选择可用商品' }}
                            </div>
                            <div
                                class="coupon_change"
                                @click="goodsImportDialog = true"
                                :style="{color: ruleForm.coupon_shop !== 2 ? '#999999' : '#409EFF', border: ruleForm.coupon_shop !== 2 ? '1px #999999 solid': '1px #1890ff solid', pointerEvents: ruleForm.coupon_shop !== 2 || ifCountEdit ? 'none' : '', marginTop: 0}"
                            >
                                {{ changeDataList.length && ruleForm.coupon_shop == 2 ? '重新导入商品' : '导入商品' }}
                            </div>
                            <el-table
                                v-show="changeDataList.length > 0 && ruleForm.coupon_shop == 2"
                                :data="changeDataList"
                                height="100%"
                                style="width: 600px;"
                                border
                                ref="couponChangeShop"
                                class="tableDate tableDateMain"
                                :style="{pointerEvents: ifCountEdit ? 'none' : ''}"
                            >
                                <el-table-column
                                    prop="goods_cover"
                                    label="商品信息"
                                    show-overflow-tooltip
                                    :formatter="emptyFormatter"
                                    align="left"
                                    :width="500"
                                >
                                    <template slot-scope="scope">
                                        <div class="info">
                                            <img
                                                :src="scope.row.goods_cover"
                                                :style="{width: '64px', height: '64px', marginRight: '12px', marginLeft: '12px'}"
                                                @click="fnShowPreview(scope.row.goods_cover)"
                                            >
                                            <div class="info_main">
                                                <p class="info_title">
                                                    {{ scope.row.goods_title }}
                                                </p>
                                                <p class="info_price">
                                                    ¥{{ scope.row.goods_price }}
                                                </p>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="操作"
                                    show-overflow-tooltip
                                    :formatter="emptyFormatter"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            @click="deleteCoupe(scope.row.goods_no, scope.row.$index, true)"
                                        >
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- /分页 -->
                            <div
                                class="pagination-wrapper-main"
                                v-show="changeDataList.length > 0 && ruleForm.coupon_shop == 2"
                            >
                                <p :style="{color: 'rgba(51, 51, 51, 1)'}">
                                    已选商品
                                    <span :style="{color: 'rgba(245, 51, 65, 1)'}">({{ page.total_count }})</span>
                                </p>
                                <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page.sync="page.now_page"
                                    :total="page.total_count"
                                    :page-size="page.page_size"
                                    @current-change="changePage"
                                />
                            </div>
                            <el-radio
                                v-model="ruleForm.coupon_shop"
                                :label="3"
                                :style="{pointerEvents: ifEdit ? 'none' : ''}"
                            >
                                指定商品不可用
                            </el-radio>
                            <div
                                class="coupon_change"
                                @click="changeNoAvailable()"
                                :style="{color: ruleForm.coupon_shop !== 3 ? '#999999' : '#409EFF', border: ruleForm.coupon_shop !== 3 ? '1px #999999 solid': '1px #1890ff solid', pointerEvents: ruleForm.coupon_shop !== 3 || ifCountEdit ? 'none' : ''}"
                            >
                                {{ changeDataArray.length && ruleForm.coupon_shop == 3 ? '修改已选商品' : '选择不可用商品' }}
                            </div>
                            <div
                                class="coupon_change"
                                @click="goodsImportDialog = true"
                                :style="{color: ruleForm.coupon_shop !== 3 ? '#999999' : '#409EFF', border: ruleForm.coupon_shop !== 3 ? '1px #999999 solid': '1px #1890ff solid', pointerEvents: ruleForm.coupon_shop !== 3 || ifCountEdit ? 'none' : '', marginTop: 0}"
                            >
                                {{ changeDataArray.length && ruleForm.coupon_shop == 3 ? '重新导入商品' : '导入商品' }}
                            </div>
                            <el-table
                                v-show="changeDataArray.length > 0 && ruleForm.coupon_shop == 3"
                                :data="changeDataArray"
                                height="100%"
                                style="width: 600px;"
                                border
                                ref="couponChangeShop"
                                class="tableDate tableDateMain"
                                :style="{pointerEvents: ifCountEdit ? 'none' : ''}"
                            >
                                <el-table-column
                                    prop="goods_cover"
                                    label="商品信息"
                                    show-overflow-tooltip
                                    :formatter="emptyFormatter"
                                    align="left"
                                    :width="500"
                                >
                                    <template slot-scope="scope">
                                        <div class="info">
                                            <img
                                                :src="scope.row.goods_cover"
                                                :style="{width: '64px', height: '64px', marginRight: '12px', marginLeft: '12px'}"
                                                @click="fnShowPreview(scope.row.goods_cover)"
                                            >
                                            <div class="info_main">
                                                <p class="info_title">
                                                    {{ scope.row.goods_title }}
                                                </p>
                                                <p class="info_price">
                                                    ¥{{ scope.row.goods_price }}
                                                </p>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="操作"
                                    show-overflow-tooltip
                                    :formatter="emptyFormatter"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            @click="deleteCoupe(scope.row.goods_no, scope.row.$index, false)"
                                        >
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- /分页 -->
                            <div
                                class="pagination-wrapper-main"
                                v-if="changeDataArray.length > 0 && ruleForm.coupon_shop == 3"
                            >
                                <p :style="{color: 'rgba(51, 51, 51, 1)'}">
                                    已选商品
                                    <span :style="{color: 'rgba(245, 51, 65, 1)'}">({{ no_page.total_count }})</span>
                                </p>
                                <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page.sync="no_page.now_page"
                                    :total="no_page.total_count"
                                    :page-size="no_page.page_size"
                                    @current-change="changeNoPage"
                                />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="优惠叠加"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <el-checkbox-group v-model="ruleForm.combine_type">
                            <el-checkbox
                                :label="1"
                                disabled
                            >
                                商家优惠券
                            </el-checkbox>
                            <el-checkbox :label="2">平台优惠券</el-checkbox>
                            <el-checkbox :label="4">倒计食活动</el-checkbox>
                        </el-checkbox-group>
                        <p
                            class="coupon-name"
                            :style="{width: '450px', fontSize: '12px', lineHeight: '18px', whiteSpace: 'normal'}"
                        >
                            勾选平台优惠券后，可以在团购商品，秒杀商品，折扣专区的活动价格基础上叠加红包活动，可与商家优惠券或平台优惠券活动叠加使用
                        </p>
                    </el-form-item>
                    <!--<el-form-item
                        label="优惠叠加"
                        prop="coupon_thres"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <div class="coupon_date">
                            <el-radio-group
                                v-model="ruleForm.coupon_super"
                                class="el-radio-group-label"
                                :style="{top: '32px'}"
                            >
                                <el-radio
                                    :label="1"
                                    class="el-radio-wrap"
                                    :style="{marginTop: '-30px'}"
                                >
                                    红包仅售价购买商品时可用，可与商家优惠券叠加使用，不可与平台优惠券活动等营销活动叠加
                                    <p
                                        class="coupon-name"
                                        :style="{width: '450px', fontSize: '12px', lineHeight: '18px', whiteSpace: 'normal'}"
                                    >
                                        勾选后，可以在团购商品，秒杀商品，折扣专区的活动价格基础上叠加红包活动，可与商家优惠券叠加使用，不可与平台优惠券活动等营销叠加
                                    </p>
                                </el-radio>
                                <el-radio
                                    :label="2"
                                    :style="{marginTop: '15px'}"
                                >
                                    红包仅售价购买商品时可用，可与商家优惠券或平台优惠券活动等营销活动叠加
                                </el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <div :style="{height: '48px'}"/>-->
                    <el-form-item
                        label="兑换人限制"
                        prop="coupon_people"
                    >
                        <div class="coupon_cloumn">
                            <div
                                :style="{flexDirection: 'column', display: 'flex'}"
                                class="coupon-top"
                            >
                                <el-radio
                                    v-model="ruleForm.coupon_people"
                                    :label="0"
                                    :style="{pointerEvents: ifEdit ? 'none' : ''}"
                                >不限制，所有人可领</el-radio>
                                <el-radio
                                    v-model="ruleForm.coupon_people"
                                    :label="2"
                                    @change="setColleage(0)"
                                    :style="{pointerEvents: ifEdit ? 'none' : ''}"
                                >限制,指定学院可领</el-radio>
                                <el-radio
                                    v-model="ruleForm.coupon_people"
                                    :label="3"
                                    @change="setColleage(1)"
                                    :style="{pointerEvents: ifEdit ? 'none' : ''}"
                                >限制,指定代理可领</el-radio>
                                <el-radio
                                    v-model="ruleForm.coupon_people"
                                    :label="4"
                                    :style="{pointerEvents: ifEdit ? 'none' : ''}"
                                >限制,一卡通会员可领</el-radio>
                                <div style="margin-top: -12px">
                                    <el-radio
                                        v-model="ruleForm.coupon_people"
                                        :label="1"
                                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                                    >限制，只有新注册的用户可领</el-radio>
                                    <el-popover
                                        placement="top-start"
                                        title="新用户注册说明"
                                        width="400"
                                        trigger="hover"
                                        content="1:尚未在平台下单购买商品; 2:在平台下单支付购买过，但是申请退款或者退款退货，订单状态为未完成; 3:在平台只购买过0元购商品的也属于新注册用户"
                                    >
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            :style="{textDecoration: 'underline', marginLeft: '-10px'}"
                                        >新用户注册说明</el-button>
                                    </el-popover>
                                </div>
                            </div>
                            <!-- 选择学校和代理 -->
                            <coupon-limit
                                v-show="ruleForm.coupon_people == 2 || ruleForm.coupon_people == 3"
                                ref="couponLimit"
                                @change="getCollect"
                                @school="getSchool"
                                @level="getLeavel"
                                :ifedit="ifEdit"
                            />
                        </div>
                    </el-form-item>
                    <el-form-item v-if="ruleForm.coupon_people === 4">
                        <div class="limit-type-option-view">
                            <div class="option-item">
                                <el-checkbox
                                    v-model="ruleForm.show_in_vip_page"
                                    :true-label="1"
                                    :false-label="0"
                                >
                                    在一卡通专享红包区域显示该红包
                                </el-checkbox>
                            </div>
                            <div class="option-item">
                                <el-checkbox
                                    v-model="ruleForm.use_vip_benefit_count"
                                    :true-label="1"
                                    :false-label="0"
                                >
                                    用户领取后，扣除一卡通权益赠送红包的每周领取次数
                                </el-checkbox>
                            </div>
                        </div>
                    </el-form-item>
                    <div class="tips-view">
                        关于公开设置特别说明：如果是为邀请助力，砍价活动，转盘抽奖等这类活动设置的红包，通过活动设置的获取门槛而获得红包奖励，并且是通过系统自动发放给用户，用于上述活动的红包，在公开设置这块建议不勾选公开设置的两个选项（特殊情况和特殊需求除外）。
                    </div>
                    <el-form-item
                        label="公开设置"
                        prop="coupon_setting"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <div class="coupon_cloumn">
                            <el-checkbox
                                v-model="ruleForm.coupon_setting"
                            >红包允许公开领取</el-checkbox>
                            <el-checkbox
                                v-model="ruleForm.get_need_temp_code"
                                class="checkbox-wrap"
                                :true-label="0"
                                :false-label="1"
                            >
                                红包允许公开推广
                                <p
                                    class="coupon-name"
                                    :style="{width: '650px', fontSize: '12px', lineHeight: '18px', whiteSpace: 'normal'}"
                                >
                                    未勾选，则红包推广链接、推广海报，推广二维码为一次性链接，用户点击链接或者扫描二维码后，推广链接和二维码就会失效。勾选后，则红包推广链接、推广海报，推广二维码为公开链接，可以重复点击链接或者扫描二维码领取红包。
                                </p>
                            </el-checkbox>
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="财控设置"
                        prop="coupon_setting"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                    >
                        <div class="coupon_cloumn">
                            <el-radio
                                v-model="ruleForm.bind_finance_control"
                                :label="1"
                            >
                                该优惠券预算列入财控预算
                            </el-radio>
                            <el-radio
                                v-model="ruleForm.bind_finance_control"
                                class="checkbox-wrap"
                                :label="0"
                                @change="showDialog = true"
                            >
                                该优惠券预算不列入财控预算
                                <p
                                    class="coupon-name"
                                    :style="{width: '650px', fontSize: '12px', lineHeight: '18px', whiteSpace: 'normal'}"
                                >
                                    选择该选项，则该优惠券创建所产生的预算将不列入平台财控计划，财务人员无法统计改项预算，请谨慎选择。
                                </p>
                            </el-radio>
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="使用说明"
                        prop="desc"
                        :style="{pointerEvents: ifEdit ? 'none' : ''}"
                        class="coupon_setting"
                    >
                        <el-input
                            v-model="ruleForm.desc"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 7}"
                            placeholder="请输入内容"
                            :style="{width: '477px', marginTop: '12px'}"
                        />
                        <el-popover
                            placement="top-start"
                            width="400"
                            trigger="hover"
                        >
                            <p :style="{fontSize: '14px', color: '#333', lineHeight: '22px', textAlign: 'left'}">
                                双十一红包<br >
                                使用时间：2020-12-12 00:00:00 至 2022-12-12 00:00:00<br >
                                优惠内容：部分商品，满88元减12元<br >
                                其他限制：仅原价购买商品时可用券<br >
                            </p>
                            <el-button
                                slot="reference"
                                type="text"
                                :style="{marginLeft: '30px', position: 'relative', top: '2px'}"
                            >查看示例</el-button>
                        </el-popover>
                    </el-form-item>
                </el-form>
            </div>

            <!-- button -->
            <div class="footer">
                <el-button
                    size="medium"
                    type="default"
                    :style="{width: '120px', margin: '0 32px 52px 80px'}"
                    v-if="TYPE !== 'detail'"
                    @click="cancelData()"
                >
                    返回
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :style="{width: '120px', margin: '0 0 52px 0'}"
                    v-if="TYPE !== 'detail'"
                    @click="submitData('ruleForm')"
                >
                    保存
                </el-button>
            </div>
        </div>

        <!-- 选择商品 -->
        <coupon-change-shop
            ref="couponChangeShopModel"
            @change="getCouponChangeShop"
        />
        <!-- 导入商品 -->
        <goods-import
            @change="getCouponChangeShop"
            :visible.sync="goodsImportDialog"
            :type="ruleForm.coupon_shop === 2"
        />

        <!-- 不列入计划提示弹窗 -->
        <show-dialog
            ref="showDialog"
            :dialog="showDialog"
            :width="360"
            :cancel-text="'取消'"
            :confirm-text="'确认'"
            :title="'温馨提示'"
            :content="'选择该选项，则该优惠券创建所产生的预算将不列入平台财控计划，财务人员无法统计改项预算，是否确认选择。'"
            @close="showDialog = false"
            @emit="showDialog = false"
        />

        <!-- 预算提示弹窗 -->
        <show-dialog
            ref="showDialog"
            :dialog="showDialog2"
            :width="360"
            :cancel-text="'取消'"
            :confirm-text="'确定'"
            :title="'温馨提示'"
            :content="`当前新人专区的平台补贴支出在计划时间${ '2021/5/24-2021/6/24' }已无预算，暂无法添加新人专区商品`"
            @close="showDialog2 = false"
            @emit="() => {
                this.$router.push({
                    name: 'couponList'
                });
            }"
        />
    </div>
</template>

<script>
import showDialog from '@/components/common/dialog.vue';
import { back } from '@/mixin/back';
import couponChangeShop from '@/components/red-packet/red-packet-goods-select';
import couponLimit from '@/components/coupon/coupon-limit';
import GoodsImport from "@/components/goods/goods-import";
const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;

export default {
    mixins: [back],
    components: {
        GoodsImport,
        couponChangeShop,
        couponLimit,
        showDialog
    },
    data () {
        const validateDate = (rule, value, callback) => {
            if(value == 'fixed') {
                if(this.ruleForm.coupon_date_time.length > 0) {
                    callback();
                } else {
                    callback(new Error('请完善固定时间'));
                }
            }

            if(value == 'note') {
                if(this.ruleForm.coupon_date_number !== '') {
                    callback();
                } else {
                    callback(new Error('请填写领券后生效时间'));
                }
            }
        };

        const validateType = (rule, value, callback) => {
            if(value == 1) {
                callback();
            }

            if(value == 2) {
                if(this.ruleForm.coupon_thres_money !== '') {
                    callback();
                } else {
                    callback(new Error('订单满减价格不可以为空'));
                }
            }

            if(value == 3) {
                if(this.ruleForm.coupon_thres_number !== '') {
                    callback();
                } else {
                    callback(new Error('订单满减数量不可以为空'));
                }
            }
        };

        const validateShop = (rule, value, callback) => {
            if(value == 1) {
                callback();
            }

            if(value == 2) {
                if(this.listCopy.length > 0) {
                    callback();
                } else {
                    callback(new Error('请选择指定可用商品'));
                }
            }

            if(value == 3) {
                if(this.arrayCopy.length > 0) {
                    callback();
                } else {
                    callback(new Error('请选择指定不可用商品'));
                }
            }
        };

        const validatePeople = (rule, value, callback) => {
            if(value == 0 || value == 1 || value == 4) {
                callback();
            }

            if(value == 2) {
                if(this.schoolList.length > 0) {
                    callback();
                } else {
                    callback(new Error('请先选择学校'));
                }

            }
            if(value == 3) {
                if(this.leavelList.length > 0) {
                    callback();
                } else {
                    callback(new Error('请先选择代理'));
                }
            }
        };

        return {
            packet_no: '',//红包编号
            packet_status: '',//红包状态 1：未生效，2：已生效，3：进行中，4：已失效，5：已过期
            verify_status: '',//审核状态，0:未提交审核，1:待审核，2:审核通过，3:审核不通过
            TYPE: '',//add:新增 edit: 编辑
            coupon_number_history: '',//记录发放总量，用于生效中修改判断
            ruleForm: {
                coupon_name: '',//红包名称
                coupon_number: '',//发放总量
                coupon_limit: '',//每人限领
                coupon_collect: [],//领券时间
                coupon_date: 'fixed',//使用时间类型 fixed note
                coupon_date_time: [],//固定时间范围
                coupon_date_number: '',//领取后生效
                coupon_type: 1,//优惠类型
                coupon_thres: 1,//使用门槛类型 1:无门槛 2:订单满价格 3:订单满件数
                coupon_thres_money: '',//订单满价格
                coupon_thres_number: '',//订单满件数
                coupon_content: '',//优惠内容
                coupon_shop: 1,//适用商品类型
                coupon_super: 1,//优惠叠加
                combine_type: [1],
                coupon_people: 0,//兑换人限制
                coupon_setting: true,//公开设置
                desc: '',//红包说明
                // 是否公开推广
                get_need_temp_code: 0,
                // 渠道类型
                channel_category: 'shop',
                // 是否平台补贴
                shop_subsidy_enable: 1,
                // 商家补贴金额
                shop_subsidy_money_by_shop: '',
                show_in_vip_page: 1,
                use_vip_benefit_count: 1,
                bind_finance_control: 1
            },
            changeDataList: [],//已经选择数据列表(可用商品)
            listCopy: [],//存储选择数据(可用商品)
            changeDataListPage: [],//存储翻页数据(可用商品)
            changeDataArray: [],//已经选择数据列表(不可用商品)
            arrayCopy: [],//存储选择数据(不可用商品)
            changeDataArrayPage: [],//存储翻页数据(不可用商品)
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            no_page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            //领券人限制
            collectType: '',//0:学校 1:代理
            schoolList: [],//选择学校
            leavelList: [],//选择代理
            rules: {
                coupon_name: [
                    { required: true, message: '红包名称不可以为空', trigger: 'change' }
                ],
                coupon_number: [
                    { required: true, message: '发放总量不可以为空', trigger: 'change' }
                ],
                coupon_limit: [
                    { required: true, message: '每人限领不可以为空', trigger: 'change' }
                ],
                coupon_collect: [
                    { required: true, message: '领券时间不可以为空', trigger: 'change' }
                ],
                coupon_date: [
                    { validator: validateDate, trigger: 'blur' },
                    { required: true, message: '请完善使用时间', trigger: 'change' }
                ],
                coupon_thres: [
                    { validator: validateType, trigger: 'blur' },
                    { required: true, message: '使用门槛不可以为空', trigger: 'change' }
                ],
                coupon_content: [
                    { required: true, message: '优惠内容减免不可以为空', trigger: 'change' }
                ],
                coupon_shop: [
                    { validator: validateShop, trigger: 'blur' },
                    { required: true, message: '适用商品类型不可以为空', trigger: 'change' }
                ],
                coupon_people: [
                    { validator: validatePeople, trigger: 'blur' },
                    { required: true, message: '兑换人限制类型不可以为空', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写使用说明', trigger: 'blur' }
                ],
                shop_subsidy_money_by_shop: [
                    { required: true, message: '请输入商家补贴金额', trigger: 'blur' },
                    { pattern: numberReg, message: '商家补贴金额必须为数字,且保留两位小数', trigger: 'blur' },
                ]
            },
            authResult: {},
            // 渠道类型选项
            channelList: [
                {label: '商城', value: 'shop'},
                {label: '私域', value: 'private_area'},
                {label: '代理', value: 'stuagent'},
                {label: '一卡通会员', value: 'student_vip'}
            ],
            goodsImportDialog: false,
            showDialog: false,
            showDialog2: false
        };
    },
    filters: {},
    computed: {
        // 不可编辑条件
        ifEdit () {
            return (this.packet_no && this.packet_status && this.packet_status !== 1) || (this.verify_status === 1) || (this.TYPE === 'detail');
        },
        // 不可编辑数量条件
        ifCountEdit() {
            return this.packet_no && this.packet_status && (this.packet_status === 4 || this.packet_status === 5 || this.verify_status === 1 || this.TYPE === 'detail');
        }
    },
    directives: {
    },
    watch: {},
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 页面初始化
         */
        init () {
            let query = this.$route.query;

            this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '商城'},{title: '红包', path: '/student/red-packet-list'},{title: query.mode === 'edit' ? '编辑红包' : '新增红包'}]);
            this.authResult = this.$route.meta.authResult;
            this.TYPE = query.mode;
            if(query.no && !query.isCopy) {
                this.packet_no = query.no;
                this.packet_status = query.packet_status;
                this.verify_status = query.verify_status;
                this.getCouponInfo();
            }

            if(query.isCopy) {
                this.packet_no = query.no;
                this.getCouponInfo();
            }
        },

        /**
         * @description 获取红包信息
         */
        getCouponInfo () {
            this.$post('/student/shop_goods_red_packet%5Cget',{
                packet_no: this.packet_no
            }, resp => {
                if (resp.code == 1) {
                    let data = resp.data;

                    this.ruleForm = {
                        coupon_name: data.title,//红包名称
                        coupon_number: data.total_num_max,//发放总量
                        coupon_limit: data.get_limit_count,//每人限领
                        coupon_collect: [
                            new Date(data.get_start_time * 1000),
                            new Date(data.get_end_time * 1000),
                        ],//领券时间
                        coupon_date: data.use_time_type == 1 ? 'fixed' : 'note',//使用时间类型 fixed note
                        coupon_date_time: data.use_time_type == 1 ? [
                            new Date(data.use_start_time * 1000),
                            new Date(data.use_end_time * 1000),
                        ] : [],//固定时间范围
                        coupon_date_number: data.use_day_duration,//领取后生效
                        coupon_type: data.type,//优惠类型
                        coupon_thres: Number(data.discount_limit_type) + 1,//使用门槛类型 1:无门槛 2:订单满价格 3:订单满件数
                        coupon_thres_money: data.discount_limit_type == 1 ? Number(data.discount_limit).toFixed(2) : '',//订单满价格
                        coupon_thres_number: data.discount_limit_type == 2 ? data.discount_limit : '',//订单满件数
                        coupon_content: Number(data.discount_num).toFixed(2),//优惠内容
                        coupon_shop: data.use_limit_type == 4 ? 3 : (data.use_limit_type == 1 ? 1 : (data.use_limit_type == 2 ? 2 : '')),//适用商品类型
                        combine_type: data.combine_type,//优惠叠加
                        coupon_people: data.get_student_limit_type,//兑换人限制
                        coupon_setting: data.show ? true : false,//公开设置
                        desc: data.desc,
                        get_need_temp_code: data.get_need_temp_code,
                        channel_category: data.channel_category,
                        shop_subsidy_enable: data.shop_subsidy_enable,
                        shop_subsidy_money_by_shop: data.shop_subsidy_money_by_shop,
                        show_in_vip_page: data.show_in_vip_page,
                        use_vip_benefit_count: data.use_vip_benefit_count,
                        bind_finance_control: data.bind_finance_control
                    };

                    //生效中记录发放总量
                    if(this.packet_status == 2) {
                        this.coupon_number_history = JSON.parse(JSON.stringify(this.ruleForm.coupon_number));
                    }

                    this.collectType = this.ruleForm.coupon_people == 2 ? 0 : ( this.ruleForm.coupon_people == 3 ? 1 : '');

                    // console.log('coupon_people', this.ruleForm.coupon_people);

                    //可用商品
                    if(this.ruleForm.coupon_shop === 2) {
                        this.getCouponChangeShop({
                            list: data.use_limit_goods_list,
                            type: true
                        });
                    }

                    //不可用商品
                    if(this.ruleForm.coupon_shop === 3) {
                        this.getCouponChangeShop({
                            list: data.use_limit_goods_list,
                            type: false
                        });
                    }

                    //已选学校
                    if(this.ruleForm.coupon_people === 2) {
                        this.schoolList = data.get_student_school_list.reduce((cur,next) => {
                            cur.push({
                                id: next.school_id,
                                name: next.school_name
                            });
                            return cur;
                        },[]);

                        this.$refs.couponLimit.setSchool(this.schoolList);
                    }

                    //已选代理
                    if(this.ruleForm.coupon_people === 3) {
                        let list = [];

                        this.leavelList = data.get_student_agent_levels.split(',');

                        list = this.leavelList.reduce((cur,next) => {
                            cur.push(Number(next));
                            return cur;
                        },[]);

                        this.$refs.couponLimit.setLeavel(list);
                    }
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 选择可用商品
         *      show(type,flag)
         *          type: true:  选择可用商品  false: 选择不可用商品
         *          flag: true:  商品回显     false: 添加商品
         */
        changeAvailable () {
            if(!this.changeDataList.length) {
                this.$refs.couponChangeShopModel.show(true);
            } else {
                this.$refs.couponChangeShopModel.show(true, true);
                this.$refs.couponChangeShopModel.setData(this.listCopy);
            }
        },

        /**
         * @description 选择不可用商品
         */
        changeNoAvailable () {
            if(!this.changeDataArray.length) {
                this.$refs.couponChangeShopModel.show(false);
            } else {
                this.$refs.couponChangeShopModel.show(false, true);
                this.$refs.couponChangeShopModel.setData(this.arrayCopy);
            }
        },

        /**
         * @description 删除商品
         */
        deleteCoupe (no, index, flag) {
            if(flag) { //可选商品
                this.changeDataList.splice(index,1);
                this.getCouponChangeShop({
                    list: this.listCopy.filter(item => ![no].includes(item.goods_no)),
                    type: true
                },this.page.now_page);
            } else { //不可选商品
                this.changeDataArray.splice(index,1);
                this.getCouponChangeShop({
                    list: this.arrayCopy.filter(item => ![no].includes(item.goods_no)),
                    type: false
                },this.no_page.now_page);
            }
        },

        /**
         * @description 获取选择的数据
         */
        getCouponChangeShop (object, now_page = 1) {
            console.log('object', object);
            //可用商品
            if(object.type) {
                let list = object.list;

                if(!list.length) {
                    this.changeDataList = [];
                    this.listCopy = [];
                    return false;
                }
                let data = [];

                for(let key=0; key<list.length; key+=5) {
                    data.push(list.slice(key, key + 5));
                }
                this.listCopy = JSON.parse(JSON.stringify(list));
                this.changeDataListPage = JSON.parse(JSON.stringify(data));
                this.changeDataList = this.changeDataListPage[now_page -1] ? this.changeDataListPage[now_page - 1] : this.changeDataListPage[now_page - 2];
                this.page.now_page = now_page;
                this.page.page_size = 5;
                this.page.total_count = list.length;

                console.log('changeDataList', data);
            }

            //不可用商品
            if(!object.type) {
                let list = object.list;

                if(!list.length) {
                    this.changeDataArray = [];
                    this.arrayCopy = [];
                    return false;
                }
                let data = [];

                for(let key=0; key<list.length; key+=5) {
                    data.push(list.slice(key, key + 5));
                }
                this.arrayCopy = JSON.parse(JSON.stringify(list));
                this.changeDataArrayPage = JSON.parse(JSON.stringify(data));
                this.changeDataArray = this.changeDataArrayPage[now_page - 1] ? this.changeDataArrayPage[now_page - 1] : this.changeDataArrayPage[now_page - 2];
                this.no_page.now_page = now_page;
                this.no_page.page_size = 5;
                this.no_page.total_count = list.length;

                console.log('changeDataArray', data);
            }
        },

        /**
         * @description 手动处理翻页(可用商品)
         */
        changePage (page) {
            this.page.now_page = page;
            this.page.page_size = 5;
            this.changeDataList = this.changeDataListPage[page - 1];
        },

        /**
         * @description 手动处理翻页(不可用商品)
         */
        changeNoPage (page) {
            this.no_page.now_page = page;
            this.no_page.page_size = 5;
            this.changeDataArray = this.changeDataArrayPage[page - 1];
        },

        /**
         * @description 取消
         */
        cancelData () {
            this.$confirm('返回后将不会保存您所修改的内容,是否返回', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push({
                    name: 'redPacketList'
                });
            });
        },

        /**
         * @description 获取限制领券类型
         */
        getCollect (type) {
            // this.collectType = type;
        },

        setColleage (type) {
            this.collectType = type;
            this.$refs.couponLimit.setType(type);
            // console.log('type', type);
        },

        /**
         * @description 获取选择学校数据
         */
        getSchool (list) {
            this.schoolList = list;
        },

        /**
         * @description 获取选择代理数据
         */
        getLeavel (list) {
            this.leavelList = list;
        },

        /**
         * @description 提交数据
         */
        submitData (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let use_limit_goods_nos = [];
                    let get_student_school_ids = [];
                    let get_student_agent_levels = [];

                    //生效中发放总量校验
                    if(this.packet_status == 2) {
                        if(this.ruleForm.coupon_number < this.coupon_number_history ) {
                            this.$notify({
                                title: '提示',
                                message: '红包发放总量只可增加,不可减少',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        } else {
                            console.log('---success----');
                        }
                    }

                    //可用商品
                    if(this.ruleForm.coupon_shop == 2) {
                        use_limit_goods_nos = this.listCopy.reduce((cur,next) => {
                            cur.push(next.goods_no);
                            return cur;
                        },[]);
                    }

                    //不可用商品
                    if(this.ruleForm.coupon_shop == 3) {
                        use_limit_goods_nos = this.arrayCopy.reduce((cur,next) => {
                            cur.push(next.goods_no);
                            return cur;
                        },[]);
                    }

                    // console.log(this.ruleForm.coupon_people, this.collectType, 'coupon_people');

                    //可领取学校
                    if(this.ruleForm.coupon_people == 2 && this.collectType == 0) {
                        get_student_school_ids = this.schoolList.reduce((cur,next) => {
                            cur.push(next.id);
                            return cur;
                        },[]);
                    }

                    //可领取精英
                    if(this.ruleForm.coupon_people == 3 && this.collectType == 1) {
                        get_student_agent_levels = this.leavelList;
                    }

                    const data = {
                        packet_no: '',
                        title: this.ruleForm.coupon_name,
                        type: this.ruleForm.coupon_type,
                        total_num_max: this.ruleForm.coupon_number,
                        get_limit_count: this.ruleForm.coupon_limit,
                        get_start_time: this.ruleForm.coupon_collect === null ? '' : (this.ruleForm.coupon_collect.length === 0 ? '' : parseInt(new Date(this.ruleForm.coupon_collect[0]).getTime() / 1000)),
                        get_end_time: this.ruleForm.coupon_collect === null ? '' : (this.ruleForm.coupon_collect.length === 0 ? '' : parseInt(new Date(this.ruleForm.coupon_collect[1]).getTime() / 1000)),
                        get_student_limit_type: this.ruleForm.coupon_people,
                        get_student_school_ids: get_student_school_ids.join(),
                        get_student_agent_levels: get_student_agent_levels.join(),
                        use_time_type: this.ruleForm.coupon_date == 'fixed' ? 1 : 2,
                        use_day_duration: this.ruleForm.coupon_date_number,
                        use_start_time: this.ruleForm.coupon_date_time === null ? '' : (this.ruleForm.coupon_date_time.length === 0 ? '' : parseInt(new Date(this.ruleForm.coupon_date_time[0]).getTime() / 1000)),
                        use_end_time: this.ruleForm.coupon_date_time === null ? '' : (this.ruleForm.coupon_date_time.length === 0 ? '' : parseInt(new Date(this.ruleForm.coupon_date_time[1]).getTime() / 1000)),
                        discount_limit_type: this.ruleForm.coupon_thres - 1,
                        discount_limit: this.ruleForm.coupon_thres == 2 ? this.ruleForm.coupon_thres_money : (this.ruleForm.coupon_thres == 3 ? this.ruleForm.coupon_thres_number : ''),
                        discount_num: Number(this.ruleForm.coupon_content).toFixed(2),
                        use_limit_type: this.ruleForm.coupon_shop == 3 ? 4 : this.ruleForm.coupon_shop,
                        use_limit_goods_nos: use_limit_goods_nos.join(),
                        combine_type: this.ruleForm.combine_type.join(),
                        show: this.ruleForm.coupon_setting ? 1 : 0,
                        desc: this.ruleForm.desc,
                        get_need_temp_code: this.ruleForm.get_need_temp_code,
                        channel_category: this.ruleForm.channel_category,
                        shop_subsidy_enable: this.ruleForm.shop_subsidy_enable,
                        shop_subsidy_money_by_shop: this.ruleForm.shop_subsidy_money_by_shop,
                        show_in_vip_page: this.ruleForm.show_in_vip_page,
                        use_vip_benefit_count: this.ruleForm.use_vip_benefit_count,
                        bind_finance_control: this.ruleForm.bind_finance_control
                    };

                    if(this.TYPE == 'edit') {
                        data.packet_no = this.packet_no;
                    }

                    this.$post('/student/shop_goods_red_packet%5Csave',{
                        ...data
                    }, resp => {
                        if (resp.code == 1) {
                            if(resp.data.result === 1) {
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 2000
                                });

                                setTimeout(()=> {
                                    this.$router.push({
                                        name: 'redPacketList'
                                    });
                                },500);
                            } else {
                                this.$zdConfirm(`当前红包的平台补贴支出${resp.data.result === -1 ? '不在财控计划时间内' : '在计划时间已无预算'} ，暂无法创建红包，如需要增加预算，请联系平台财务人员。`, '温馨提示', {
                                    confirmButtonText: '知道了',
                                    hasCancelButton: false,
                                    type: 'warning'
                                }).then(() => {});
                            }
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    });

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * @description 查看图片
         * @param   {String}    images    单图预览
         * @param   {Array}     images     多图预览
         */
        fnShowPreview(images) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 是否平台补贴确认
         */
        handleRadioChange(value) {
            if(value === 0) {
                this.$confirm('是否确认该平台红包的优惠金额由商家补贴?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.ruleForm.shop_subsidy_enable = 0;
                }).catch(() => {
                    this.ruleForm.shop_subsidy_enable = 1;
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.couponEditor {
    width: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 12px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 3px;
    }
    .couponEditor-wrap {
        flex: 1;
        .header {
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            white-space: nowrap;
            box-sizing: border-box;
            padding-left: 35px;
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            border-bottom: 1px rgba(233, 233, 233, 1) solid;
            &::before {
                content: '';
                background: rgba(24, 144, 255, 1);
                width: 3px;
                height: 20px;
                position: absolute;
                top: 23px;
                left: 25px;
            }
        }
        .wrap {
            width: calc(100% - 48px);
            margin: 24px;
            background: #FBFBFB;
            box-sizing: border-box;
            border-radius: 2px;
            border: 1px #eeeeee solid;
            padding: 20px 32px 12px 32px;
            .title {
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
                font-weight: 500;
                border-bottom: 1px #e9e9e9 solid;
                margin-bottom: 24px;
            }
            .el-form-wrap {
                .coupon-name {
                    color: rgba(153, 153, 153, 1);
                    font-size: 14px;
                    margin-left: 12px;
                }
                .coupon_date {
                    height: 40px;
                    display: flex;
                    align-items: center;
                }
                .el-radio-group-label {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                    position: relative;
                    top: 60px;
                }
                .el-line {
                    height: 112px;
                }
                .el-radio-wrap {
                    display: flex;
                    align-items: center;
                }
                .coupon_cloumn {
                    display: flex;
                    flex-direction: column;
                    .checkbox-wrap {
                        display: flex;
                        align-items: center;
                        /deep/ .el-checkbox__label {
                            display: flex;
                            align-items: center;
                        }
                    }
                }
                .coupon_change {
                    width: 130px;
                    height: 36px;
                    border: 1px rgba(24, 144, 255, 1) solid;
                    border-radius: 4px;
                    color: rgba(24, 144, 255, 1);
                    font-size: 14px;
                    text-align: center;
                    line-height: 36px;
                    cursor: pointer;
                    margin-top: 24px;
                    margin-left: 27px;
                    margin-bottom: 24px;
                }
            }
        }
        .footer {
            display: flex;
            align-items: center;
        }
        .tableDate {
            .info {
                display: flex;
                align-items: center;
            }
            .info_main {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 64px;
                align-items: flex-start;
                .info_title {
                    color: rgba(51, 51, 51, 1);
                    font-size: 12px;
                    line-height: 18px;
                    width: 164px;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    justify-content: flex-start;
                    text-align: left;
                }
                .info_price {
                    color: rgba(245, 51, 65, 1);
                    font-size: 14px;
                    height: 20px;
                    line-height: 20px;
                }
            }
        }
        /* 分页 */
        .pagination-wrapper-main {
            width: 599px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fbfbfb;
            box-sizing: border-box;
            border-left: 1px #EBEEF5 solid;
            border-right: 1px #EBEEF5 solid;
            border-bottom: 1px #EBEEF5 solid;
            padding: 21px 26px 10px 11px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
                display: flex;
                align-items: center;
            }
        }
    }
    .limit-type-option-view {
        background: #F7F7F7;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        margin-top: -10px;
        padding: 16px 24px;
        .option-item {
            display: flex;
            align-items: center;
        }
    }
    .tips-view {
        display: flex;
        align-items: center;
        padding: 12px 24px;
        margin-bottom: 12px;
        min-height: 42px;
        background: #FFF6D6;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #896C43;
        line-height: 22px;
    }
}
</style>

<style lang="less">
.couponEditor {
    .el-form-item__content {
        display: flex;
        align-items: center;
        .el-input {
            display: flex;
            align-items: center;
        }
    }
    .el-input__inner {
        color: rgba(51, 51, 51, 1);
    }
    .el-radio-wrap {
        .el-radio__label {
            display: flex;
            align-items: center;
        }
    }
    .coupon_cloumn {
        .el-radio {
            margin-top: 24px;
        }
        .el-radio:first-child {
            margin-top: 13px;
        }
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .el-table th, .el-table tr {
        background-color: #fbfbfb;
    }
    .tableDateMain {
        .el-table__body-wrapper {
            max-height: 420px;
        }
    }
    .pagination-wrapper-main {
        .el-pagination {
            .el-pager {
                display: flex;
                align-items: center;
            }
        }
    }
    .el-table__body-wrapper {
        height: auto !important;
    }
    .el-textarea__inner {
        resize: none;
    }
    .coupon-top {
        margin-top: 12px;
        .el-radio {
            margin-top: 0px;
            margin-bottom: 24px;
        }
        .el-radio:first-child {
            margin-top: 0px !important;
        }
    }
    .coupon_setting {
        .el-form-item__content {
            align-items: flex-start;
        }
    }
}
</style>
